<template>
	<view >
		<view class="top-search">
			<img src="/static/images/icon_search.png" alt="" />
			<input 
			type="text" 
			v-model="searchText"
			placeholder="开始寻找你梦寐以求的工作..."
			@confirm="handleEmit"></input>
		</view>
		<view class="home-list">
			<view class="disSb">
				<text>热门公司</text>
				<text style="font-size:27.52rpx ;color: rgba(253, 119, 83, 1);margin-left: 30rpx;">查看全部</text>
			</view>
			<company-list></company-list>
		</view>
		<view class="home-content">
			<view class="disSb">
				<text>最近空缺职位</text>
				<text style="font-size:27.52rpx ;color: rgba(253, 119, 83, 1);margin-left: 30rpx;">查看全部</text>
			</view>
			<custom-empty v-if="list.length==0"/>
			<company-list-content 
			  v-for="item in list" 
			  :key="item.objectId"
			  :companyData="item"
			  @click="handleDetail(item.objectId)">
			</company-list-content>
		</view>
	</view>
</template>

<script setup lang="ts">
import {APPID,APPKEY,BASE} from '../../config/index'
import http from '../../utils/request'
import { ref, watch, type Ref } from 'vue'
import type { CompanyType } from '../../model/company'
import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
	// uni.request({
	// 	url:'https://qmziugn6.lc-cn-n1-shared.com/1.1/classes/company',
	// 	header:{
	// 		"X-LC-Id": APPID,
	// 		"X-LC-Key": APPKEY,
	// 		"Content-Type": "application/json"
	// 	},
	// 	success: (res) => {
	// 		console.log(res);
	// 	}
	// })
	
	const list=ref<Array<CompanyType>>([])
	let skip = Math.floor(Math.random()*15 + 5)
	http.get('/classes/company',{
		params:{
			limit:6,
			skip
		}
	}).then(res=>{
		console.log('三方库获取数据',res);
		list.value=res.data.results
	})
	let page =1
	onReachBottom(()=>{
		console.log('触底');
		let skip=page*6
		http.get('/classes/company',{
			params:{
				limit:6,
				skip
			}
		}).then(res=>{
			let results=res.data.results
			if(results.length!=0){
				list.value=[
					...list.value,
					...results
				]
				page++
				return
			}
			uni.showToast({
				title:'没有东西了',
				icon:'none'
			})
			
		})
	})
	//下拉刷新
	onPullDownRefresh(()=>{
		console.log('下拉刷新');
		let skip=Math.floor(Math.random()*15+5)
		http.get('/classes/company',{
			params:{
				limit:6,
				skip
			}
		}).then(res=>{
			list.value=res.data.results
			uni.stopPullDownRefresh()//主动关闭刷新动画
		})
	})
	
	const searchText:Ref<string> = ref('') //3. 实时获取输入框的内容
	watch(searchText,()=>{
		console.log('公司页面',searchText.value); // 5. 监听子组件中传回的新数据变化
		page=1
		http.get('/classes/company',{
			params:{
				where:{
					'address':{"$regex":searchText.value}   //模糊匹配、正则匹配
				}
			}
		}).then(res=>{
			list.value=res.data.results
		})
	})
	const handleDetail=(id:string)=>{
		uni.navigateTo({
			url:`/pages/company/detail?id=${id}`
		})
	}
</script>

<style lang="scss">
page{
	background-color: #fff;
}
.home-content {
	margin-left: 40rpx;
	margin-top: 40rpx;
}
.top-search{
	height: 110.09rpx;
	margin: 30rpx 40rpx;
	display: flex;
	align-items: center;
	border: #EEEEEE 4rpx solid;
	border-radius: 10rpx;
	padding: 10rpx 20rpx;
}
.top-search img{
	width: 45.87rpx;
	height: 45.87rpx;
}
.top-search input{
	height: 55.05rpx;
	width: 612.39rpx;
	margin-left: 16rpx;
}
.home-list{
	margin-left: 40rpx;
	margin-top: 40rpx;
}
.home-list text{
	font-size:32.11rpx;
	color: rgba(40, 33, 31, 1);
}
.disSb{
	display: flex;
	justify-content: space-between;
	width: 690rpx;
	margin-bottom: 20rpx;
}
</style>
